fix: Tooltip: render non-string content outside of the Text component #557
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
When using the
<Tooltip>
component and passing in a non-stringReact.ReactNode
intocontent
, React produces warnings noting that specific elements cannot appear as descendants of ap
tag. This change introduces a prop onTooltip
that allows the dev to define what<Text as="_">
property they want to pass, enabling non-string content to be an allowed child in the tooltip and not produce a console warning.The change introduces a
textAs
prop which pulls from thetextPropTypes['as']
value and passes that down to the<Text>
in the tooltip, falling back to the currently hardcodedp
valueHere are the warnings that are produced without this change:
Testing steps
Manual testing on the playground page with a non-string ReactNode example
Relates issues / PRs